<template>
  <div class="dialog-body">
    <div class="form-group">
      <label>预约日期</label>
      <input type="date" :value="formData.date" @input="updateDate($event)" class="form-input" :min="minDate">
    </div>
    <div class="form-group">
      <label>预约时间</label>
      <input type="time" :value="formData.time" @input="updateTime($event)" class="form-input">
    </div>
    <div class="form-group">
      <label>服务时长</label>
      <select :value="formData.duration" @change="updateDuration($event)" class="form-input">
        <option value="2">2小时</option>
        <option value="3">3小时</option>
        <option value="4">4小时</option>
      </select>
    </div>
    <div class="form-group">
      <label>特殊要求</label>
      <textarea 
        :value="formData.requirements" 
        @input="updateRequirements($event)"
        class="form-input" 
        rows="3" 
        placeholder="请输入特殊要求（选填）"
      ></textarea>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CleaningAppointment',
  props: {
    formData: {
      type: Object,
      required: true
    }
  },
  computed: {
    minDate() {
      const today = new Date();
      return today.toISOString().split('T')[0];
    }
  },
  methods: {
    updateDate(event) {
      this.$emit('update:formData', {
        ...this.formData,
        date: event.target.value
      });
    },
    updateTime(event) {
      this.$emit('update:formData', {
        ...this.formData,
        time: event.target.value
      });
    },
    updateDuration(event) {
      this.$emit('update:formData', {
        ...this.formData,
        duration: event.target.value
      });
    },
    updateRequirements(event) {
      this.$emit('update:formData', {
        ...this.formData,
        requirements: event.target.value
      });
    },
    validate() {
      return '';
    }
  }
};
</script>

<style scoped>
select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
</style> 